<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="2" size="medium"><span>公告：</span></el-col>
      <el-col :span="10">
                <el-carousel class="lunbo" height="35" direction="vertical">
                  <el-carousel-item v-for="(item, index) in announcementsList" :key="index">
                    <span >{{ item.content }}</span>
                  </el-carousel-item>
                </el-carousel>
      </el-col>
      <el-col :span="12">
        <el-tag type="danger">今日加入总数：{{persontotal}} 位</el-tag>
        <el-tag type="success">今日加入男士：{{mancount}} 位</el-tag>
        <el-tag type="warning">今日加入女士：{{womancount}} 位</el-tag>
        <el-tag type="info">今日退住人数：{{backcount}} 位</el-tag>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="1"></el-col>
      <el-col :span="5"><div class="grid-content bg-purple">
        <el-row :gutter="200">
<!--          <el-card>-->
<!--            <ul>-->
<!--              <li v-for="(item, index) in announcementsList" :key="index">-->
<!--                <span>{{ item.content }}</span>-->
<!--              </li>-->
<!--            </ul>-->
<!--          </el-card>-->
          <el-card shadow="hover" style="width: 100%;">
            <div style="font-size: 18px;text-align: center; margin-top: 35px;">
              明日复明日
            </div>
            <div style="font-size: 18px;text-align: center;">明日何其多</div>
            <div style="font-size: 18px;text-align: center;">我生待明日</div>
            <div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
            <div style="margin-top: 35px;"></div>
            <el-statistic
              ref="statistic"
              @finish="hilarity"
              format="HH:mm:ss"
              :value="deadline4"
              title="距离明日："
              time-indices
            >
            </el-statistic>
          </el-card>


<!--          <el-table :data="announcementsList" size="mini" >-->
<!--              <el-table-column label="公寓名称" align="center" prop="apartmentName" />-->
<!--              <el-table-column label="公告标题"  align="center" prop="title" />-->
<!--              <el-table-column label="公告内容"  align="center" prop="content" />-->
<!--              <el-table-column label="发布日期"  align="center" prop="postDate" />-->
<!--            </el-table>-->
        </el-row>
      </div></el-col>
      <el-col :span="12"><div>
<!--        <el-row :gutter="20">-->
<!--          <el-popover-->
<!--            placement="center"-->
<!--            trigger="click">-->
<!--            <div class="player-container">-->
<!--              <vue-core-video-player src="http://47.120.42.179:9000/minio-video/meeting_01.mp4"></vue-core-video-player>-->
<!--            </div>-->
<!--          </el-popover>-->
<!--        </el-row>-->
        <el-row :gutter="20" class="grid-content bg-purple">
          <!-- 图片轮训 -->
          <el-carousel :interval="5000" arrow="always" :height="300+'px'">
            <el-carousel-item v-for="(item,index) in bannerList" :key="index" :name="item.bannerName" :label="item.bannerName">
              <img :src="item.bannerUrl" >
            </el-carousel-item>
          </el-carousel>
        </el-row><br>
        <el-row :gutter="20" class="total-details">
          <!-- 公寓信息统计 -->
          <div id="main" style="width: 600px;height:400px;">
<!--            <v-chart class="chart" :option="option" />-->
          </div>
        </el-row><br>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <!-- 日历 -->
        <el-calendar v-model="value">
        </el-calendar>
      </div></el-col>
    </el-row>
    <el-row :gutter="20">
<!--      <el-col :sm="24" :lg="12" style="padding-left: 20px">-->
<!--        <h2>智云老年公寓管理系统</h2>-->
<!--        <p>-->

<!--        </p>-->
<!--        <p>-->
<!--          <b>当前版本:</b> <span>v{{ version }}</span>-->
<!--        </p>-->
<!--        <p>-->
<!--          <el-button-->
<!--            type="primary"-->
<!--            size="mini"-->
<!--            icon="el-icon-cloudy"-->
<!--            plain-->
<!--            @click="goTarget('https://gitee.com/jadexc/elderlyApart.git')"-->
<!--            >码云链接地址</el-button-->
<!--          >-->
<!--          <br>-->
<!--        </p>-->
<!--        <p>-->
<!--          <el-button-->
<!--          type="danger">-->
<!--            暂时不允许访问-->
<!--          </el-button><span>如果有问题请联系</span>-->
<!--        </p>-->
<!--      </el-col>-->

<!--      <el-col :sm="24" :lg="12" style="padding-left: 50px">-->
<!--        <el-row>-->
<!--          <el-col :span="12">-->
<!--            <h2>技术选型</h2>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->
<!--          <el-col :span="6">-->
<!--            <h4>后端技术</h4>-->
<!--            <ul>-->
<!--              <li>SpringBoot</li>-->
<!--              <li>Spring Security</li>-->
<!--              <li>JWT</li>-->
<!--              <li>MyBatis</li>-->
<!--              <li>Druid</li>-->
<!--              <li>Fastjson</li>-->
<!--              <li>...</li>-->
<!--            </ul>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <h4>前端技术</h4>-->
<!--            <ul>-->
<!--              <li>Vue</li>-->
<!--              <li>Vuex</li>-->
<!--              <li>Element-ui</li>-->
<!--              <li>Axios</li>-->
<!--              <li>Sass</li>-->
<!--              <li>Quill</li>-->
<!--              <li>...</li>-->
<!--            </ul>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-col>-->
    </el-row>
    <el-divider />
    <el-row :gutter="20">
    </el-row>
  </div>
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import {recentNoticeContent} from "@/api/business/announcements";
import {getNewElderInfo} from "@/api/business/elderInfo";
import {getBannerList} from "@/api/business/elderlyapartment";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  data() {
    return {
      deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
      announcementsList:{},
      value: new Date(),
      imagesList:[
        "http://47.120.42.179:9000/minio-file/1708745212339_minio-file_4e3cce6c-37a9-4862-9645-fa5bd4ab7362.jpg",
        "http://47.120.42.179:9000/minio-file/1708745212339_minio-file_4e3cce6c-37a9-4862-9645-fa5bd4ab7362.jpg",
        "http://47.120.42.179:9000/minio-file/1708745212339_minio-file_4e3cce6c-37a9-4862-9645-fa5bd4ab7362.jpg"
      ],
      // 版本号
      version: "1.0.0",
      option: {
        title: {
          text: "Traffic Sources",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "Direct",
            "Email",
            "Ad Networks",
            "Video Ads",
            "Search Engines"
          ]
        },
        series: [
          {
            name: "Traffic Sources",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "Direct" },
              { value: 310, name: "Email" },
              { value: 234, name: "Ad Networks" },
              { value: 135, name: "Video Ads" },
              { value: 1548, name: "Search Engines" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(245, 245, 0, 0.5)"
              }
            }
          }
        ]
      },
      //el-carousel的容器高度
      bannerHeight:0,
      // 浏览器高度
      screenWidth:0,
      mancount:0,
      womancount:0,
      persontotal:0,
      backcount:0,
      bannerList:[],

    };
  },
  created() {
    this.getNoticeText();
    this.getnewElderInfo();
    this.getBannerList();
    // this.getElderApartmentInfo();
    this.user = this.$store.state.user;
  },
  mounted () {
    // 首次加载时,初始化高度
    this.screenWidth = window.innerWidth
    this.bannerHeight = 600 / 1550 * this.screenWidth
    // 窗口大小发生改变
    window.onresize = () => {
      this.screenWidth = window.innerWidth
      this.bannerHeight = 600 / 1550 * this.screenWidth
    }
  },
  methods: {
    hilarity() {
      this.$notify({
        title: "提示",
        message: "时间已到",
        duration: 0,
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    getNoticeText(){
      recentNoticeContent().then(response => {
        this.announcementsList = response.rows;
      });
    },
    getnewElderInfo(){
      getNewElderInfo().then(response => {
        // console.log(response)
        this.mancount = response.mancount;
        this.womancount = response.mancount;
        this.persontotal = response.total;
        this.backcount = response.backcount;
      });
    },
    getBannerList() {
      getBannerList().then(response => {
        this.bannerList = response.rows;
      });
    },

  },
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: "dark"
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    //padding-left: 5px;
    //min-height: 360px;
  }
  .total-details{
    border-radius: 4px;
    min-height: 100px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 500px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .chart {
    height: 400px;
  }
  .lunbo {
    padding: 0 8px 0 0;
    box-sizing: border-box;
    height: 35px;//文本区域的高度
    line-height: 35px;//文本的行间距，与高度相同，则表示一行展示
    text-overflow: ellipsis;//超出内容...展示
    word-break: keep-all;//是否折断文本，keep-all表示不折断
    white-space: nowrap;//不换行展示文本
    overflow: hidden;//超出部分隐藏，与text-overflow配合使用
    flex: 1;//这个是跟左侧的图片组成的一个flex布局
    //background: #77c1fd;
  }
  img {
    width: 100%;
    height: inherit;
  }
  .el-carousel__item{
    color: #f35650;
    font-size: inherit;
  }
  /* 使用 scoped 样式覆盖 */
  .el-carousel__item {
    background-color: #fff  !important; /* 设置轮播项的背景颜色为白色 */
  }
}
</style>

